<template>
  <div class="app-container">
    <div class="studentSituationDetails_info_wrap">
      <div class="studentSituationDetails_info_title">
        <div class="info_head">
          <img src="./defaultHead.png" alt="">
        </div>
        <div class="info_basic">
          <div class="info_basic_name">{{ form.name }}</div>
          <div class="info_basic_other">{{ form.school }} | 学号：{{ form.tudentID }}</div>
        </div>
      </div>
      <div class="studentSituationDetails_info_statistics">
        <div class="studentSituationDetails_info_statistics_li backG1">
          <div class="studentSituationDetails_info_statistics_li_name" style="color: #1D4ED8">总课程数</div>
          <div class="studentSituationDetails_info_statistics_li_content" style="color: #1D4ED8"><span class="studentSituationDetails_info_statistics_li_content_num" style="color: #1D4ED8">{{ form.courseTotal }}</span>门</div>
        </div>
        <div class="studentSituationDetails_info_statistics_li backG2">
          <div class="studentSituationDetails_info_statistics_li_name" style="color: #16A34A">总课程数</div>
          <div class="studentSituationDetails_info_statistics_li_content" style="color: #16A34A"><span class="studentSituationDetails_info_statistics_li_content_num" style="color:#15803D;">{{ form.courseCompleted }}</span>门</div>
        </div>
        <div class="studentSituationDetails_info_statistics_li backG3">
          <div class="studentSituationDetails_info_statistics_li_name" style="color: #CA8A04">总课程数</div>
          <div class="studentSituationDetails_info_statistics_li_content" style="color: #CA8A04"><span class="studentSituationDetails_info_statistics_li_content_num" style="color:#A16207;">{{ form.homeworkCompleted }}</span>次</div>
        </div>
        <div class="studentSituationDetails_info_statistics_li backG4">
          <div class="studentSituationDetails_info_statistics_li_name" style="color: #9333EA">总课程数</div>
          <div class="studentSituationDetails_info_statistics_li_content" style="color: #9333EA"><span class="studentSituationDetails_info_statistics_li_content_num" style="color:#7E22CE;">{{ form.learningProgress }}</span>%</div>
        </div>
      </div>
      <div class="studentSituationDetails_info_content">
        <div class="studentSituationDetails_info_content_li" v-for="item in form.courseList" :key="item.id">
          <div class="studentSituationDetails_info_content_li_top">
            <div class="studentSituationDetails_info_content_li_top_left">
                <div class="studentSituationDetails_info_content_li_top_left_title">{{ item.title }}</div>
                <div class="studentSituationDetails_info_content_li_top_left_content">{{ item.teacher }} | {{item.date }}</div>
            </div>
            <div class="studentSituationDetails_info_content_li_top_right">
              <el-button
                size="mini"
                type="primary"
                @click="goDetails(item)"
              >
                <div style="display: flex;align-items: center">
                  <img style="height: 16px;margin-right: 5px" src="./look.png" alt="">
                  <div>查看详情</div>
                </div>
              </el-button>
            </div>
          </div>
          <div class="studentSituationDetails_info_content_li_bottom">
            <div class="studentSituationDetails_info_content_li_bottom_li">
              <div class="studentSituationDetails_info_content_li_bottom_li_img">
                <img v-if="item.isSignIn" src="./signIn.png" alt="">
                <img v-else src="./unSignIn.png" alt="">
              </div>
              <div class="studentSituationDetails_info_content_li_bottom_li_content">
                <div class="studentSituationDetails_info_content_li_bottom_li_content_top">签到情况</div>
                <div class="studentSituationDetails_info_content_li_bottom_li_content_bottom" :style="{color: item.isSignIn ? '#16A34A':'#6B7280'}">{{ item.isSignIn ? '已签到':item.isSignIn ? '未签到':'' }} </div>
              </div>
            </div>
            <div class="studentSituationDetails_info_content_li_bottom_li">
              <div class="studentSituationDetails_info_content_li_bottom_li_content">
                <div class="studentSituationDetails_info_content_li_bottom_li_content_top">在线学习进度</div>
                <div class="studentSituationDetails_info_content_li_bottom_li_content_bottom" style="color: #2563EB">{{item.studyProgress}} </div>
              </div>
            </div>
            <div class="studentSituationDetails_info_content_li_bottom_li">
              <div class="studentSituationDetails_info_content_li_bottom_li_img">
                <img v-if="item.homeworkCompleted" src="./homeWork.png" alt="">
                <img v-else src="./unHomeWork.png" alt="">
              </div>
              <div class="studentSituationDetails_info_content_li_bottom_li_content">
                <div class="studentSituationDetails_info_content_li_bottom_li_content_top">作业完成</div>
                <div class="studentSituationDetails_info_content_li_bottom_li_content_bottom" :style="{color: item.homeworkCompleted ? '#16A34A':'#6B7280'}">{{ item.homeworkCompleted ? '已完成':item.homeworkCompleted ? '未完成':'' }} </div>
              </div>
            </div>
            <div class="studentSituationDetails_info_content_li_bottom_li">
              <div class="studentSituationDetails_info_content_li_bottom_li_img">
                <img v-if="item.homeworkCompleted" src="./satisfaction.png" alt="">
                <img v-else src="./unSatisfaction.png" alt="">
              </div>
              <div class="studentSituationDetails_info_content_li_bottom_li_content">
                <div class="studentSituationDetails_info_content_li_bottom_li_content_top">填写满意度</div>
                <div class="studentSituationDetails_info_content_li_bottom_li_content_bottom" :style="{color: item.homeworkCompleted ? '#CA8A04':'#16A34A'}">{{ item.homeworkCompleted ? '已填写':item.homeworkCompleted ? '未填写':'' }}  </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addTeacher } from "@/api/classai/teacher";
import {addTraining, getTraining, updateTraining} from "@/api/classai/training";

export default {
  name: "StudentSituationDetails",
  dicts: ['px_type'],
  data() {
    return {
      // 表单参数
      form: {
        name:' 陈雨薇',
        school:' 市第一实验中学 ',
        tudentID:' 2022001',
        courseTotal:' 8',
        courseCompleted:' 6',
        homeworkCompleted:' 4',
        learningProgress:' 75',
        courseList:[
          {
            id:'11',
            title:'篮球基础训练',
            teacher:'篮球基础训练',
            date:'周一 08:00-09:30',
            isSignIn:true,
            studyProgress:'16%',
            homeworkCompleted:true,
            satisfaction:true,
          },
          {
            id:'12',
            title:'篮球基础训练',
            teacher:'篮球基础训练',
            date:'周一 08:00-09:30',
            isSignIn:false,
            studyProgress:'16%',
            homeworkCompleted:false,
            satisfaction:false,
          },
          {
            id:'13',
            title:'篮球基础训练',
            teacher:'篮球基础训练',
            date:'周一 08:00-09:30',
            isSignIn:false,
            studyProgress:'16%',
            homeworkCompleted:true,
            satisfaction:true,
          },
        ]
      },
      loading:false,
      // 表单校验
      rules: {
      }
    };
  },
  created(){
    this.getList()
  },
  methods: {
    getList(){
      // let id = this.$route.query.id
      // getTraining(id).then(response => {
      //   this.form = response.data;
      // });
    },
    goDetails(row){
      this.$router.push(`/pxmanage/studentSituationCourseDetails?id=${row.id}`)
    },

  }
};
</script>
<style lang="scss" scoped>
.app-container{
  background: #f3f4f6;
  flex: 1;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
}
.studentSituationDetails_info_wrap {
  flex: 1;
  overflow: auto;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  padding: 24px;
  display: flex;
  flex-direction: column;
  .studentSituationDetails_info_title{
    display: flex;
    align-items: center;
    margin-bottom: 34px;
    .info_head{
      width: 60px;
      height: 60px;
      img{
        width: 100%;
      }
    }
    .info_basic{
      margin-left: 24px;
      .info_basic_name{
        font-family: Roboto;
        font-size: 24px;
        font-weight: 600;
        line-height: 32px;
        color: #111827;
        margin-bottom: 8px;
      }
      .info_basic_other{
        font-size: 16px;
        line-height: 24px;
        color: #4B5563;
      }
    }
  }
  .studentSituationDetails_info_statistics{
    display: flex;
    margin-bottom: 32px;
    .studentSituationDetails_info_statistics_li{
      flex: 1;
      padding: 16px;
      box-sizing: border-box;
      border-radius: 8px;
      margin-right: 24px;
      font-size: 14px;
      line-height: 20px;
      .studentSituationDetails_info_statistics_li_name{
        margin-bottom: 5px;
      }
      .studentSituationDetails_info_statistics_li_content{
        display: flex;
        align-items: flex-end;
        .studentSituationDetails_info_statistics_li_content_num{
          font-size: 24px;
          font-weight: bold;
          margin-right: 4px;
        }
      }
    }
    .studentSituationDetails_info_statistics_li:nth-child(4){
      margin-right: 0;
    }
    .backG1{
      background-color: #EFF6FF;
    }
    .backG2{
      background-color: #F0FDF4;
    }
    .backG3{
      background-color: #FEFCE8;
    }
    .backG4{
       background-color: #FAF5FF;
     }

  }

  .studentSituationDetails_info_content{
    flex: 1;
    .studentSituationDetails_info_content_li{
      padding: 24px;
      box-sizing: border-box;
      border-radius: 8px;
      background-color: #F9FAFB;
      margin-bottom: 24px;
      .studentSituationDetails_info_content_li_top{
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
        .studentSituationDetails_info_content_li_top_left{
          .studentSituationDetails_info_content_li_top_left_title{
            font-family: Roboto;
            font-size: 18px;
            font-weight: 500;
            line-height: 28px;
            color: #111827;
          }
          .studentSituationDetails_info_content_li_top_left_content{
            font-size: 14px;
            line-height: 20px;
            color: #4B5563;
          }
        }
      }
      .studentSituationDetails_info_content_li_bottom{
        display: flex;
        .studentSituationDetails_info_content_li_bottom_li{
          flex: 1;
          display: flex;
          align-items: center;
          .studentSituationDetails_info_content_li_bottom_li_img{
            height: 24px;
            margin-right: 5px;
            img{
              height: 100%;
            }
          }
          .studentSituationDetails_info_content_li_bottom_li_content{
            .studentSituationDetails_info_content_li_bottom_li_content_top{
              font-size: 14px;
              line-height: 20px;
              color: #4B5563;
            }
            .studentSituationDetails_info_content_li_bottom_li_content_bottom{
              font-size: 16px;
              line-height: 24px;
            }

          }
        }
      }
    }
  }
}

</style>
